<template>
  <div class="page" text-align: center>
    <!-- 侧边导航栏 -->
    <nav class="sidebar">
      <ul>
        <li @click="navigateTo('/welcome')">基地详情</li>
        <li @click="navigateTo('/BaseAdd')">基地添加</li>
        <li @click="navigateTo('/BaseDelete')">基地删除</li>
        <li @click="navigateTo('/BaseEdit')">基地修改</li>
        <li @click="navigateTo('/ClassOpen')">开课管理</li>
        <!-- 添加其他导航选项 -->
      </ul>
    </nav>

    <!-- 右侧内容区域 -->
    <div class="content">
      <button class="test_goBack" @click="goBack">返回登录</button>
      <div class="center-horizontal">
        <h1>欢迎登录基地管理系统</h1>
      </div>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <p>
        <span> 基地名称：</span>
      </p>

      <select class="select1" @change="fetchData" style="background-color: rgb(194, 187, 187);">
        <option value="null">null</option>
        <option v-for="name in baseNames" :key="name" :value="name">{{ name }}</option>
      </select>

      <button @click="sendDeleteRequest">删除</button>

    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  data() {
    return {
      baseNames: [], // 用于存储从后端获取的基地名称
    };
  },
  mounted() {
    this.getBaseNames(); // 组件加载时获取数据
  },
  methods: {
    getBaseNames() {
      axios.get('http://localhost:5000/get_baseName')
        .then(response => {
          // 假设响应数据是一个列表，每个元素都有一个 BaseName 属性
          this.baseNames = response.data.map(item => item.BaseName);
        })
        .catch(error => {
          console.error('请求错误:', error);
        });
    },
    sendDeleteRequest() {
      axios.get('http://localhost:5000/delete_data')
        .then(response => {
          alert("删除成功")
        })
        .catch(error => {
          console.error('删除请求错误:', error);
        });
    }
  },
  setup() {
    const router = useRouter();

    // 导航到指定路由
    function navigateTo(route) {
      router.push(route);
    }

    // 返回登录页面
    function goBack() {
      router.push('/');
    }

    return {
      navigateTo,
      goBack,
    };
  },
};
</script>

<style scoped>
/* 样式调整，使导航栏在左侧并占据整个左侧高度 */
.page {
  display: flex;
}

.select1 {
  width: 200px;
  
}

.select11 {
  width: 200px;
}

.select2 {
  width: 200px;
  
}

.head1 {
  margin-left: -20%;
}

.head2 {
  margin-left: -40%;
}

.sidebar {
  width: 10%;
  /* 可根据需求调整宽度 */
  background-color: #333;
  color: white;
  height: auto;
  /* 100%视窗高度，占据整个左侧高度 */
  overflow-y: auto;
  /* 如果内容超出高度，添加滚动条 */
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  padding: 10px;
  cursor: pointer;
}

.head0 {
  margin-left: -20%;
}

.test0 {
  margin-left: -20%;
}

.content {
  height: 100vh;
  width: 100vh;
  ;
  flex: 1;
  /* 填充剩余空间 */
  padding: 20px;
  color: rgb(0, 0, 0);
  background-color: rgb(245, 245, 245);

}

.test {
  margin-left: -20%;
}

.test_goBack {
  margin-right: -90%;
}


/* 样式调整，使导航选项看起来更明显 */
.sidebar ul li:hover {
  background-color: #555;
}</style>
